<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>地址管理</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/style.css" />
    <style>
        html,
        body {
            /*background: #fff;*/
        }

        .inner_header {
            font-size: 1.6rem;
            color: #000000;
            font-weight: 600;
            height: 6.9rem;
            margin: 0;
            padding: 2.4rem 0 0 0;
            box-sizing: border-box;
            background: none!important;
            box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);
            background: #fff!important;
        }

        .content {
            width: 100%;
            float: left;
            margin: 6.9rem 0 0 0;
        }

        .content_list {
            background: #fff;
            width: 100%;
            float: left;
            box-sizing: border-box;
            padding: 0 0 0 1.3rem;
            margin-bottom: 1rem;
        }

        .content_li {
            float: left;
            width: 100%;
            height: 8.45rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #e6e6e6;
            color: #333333;
            font-size: 1.5rem;
            line-height: 8.45rem;
        }

        .content_li .head {
            display: flex;
            width: 100%;
            height: 1.5rem;
            margin: 1.65rem 0 1.1rem 0;
            color: #333;
            align-items: center;
            line-height: 1.5rem;
            justify-content: space-between;
            padding: 0 1.3rem 0 0;
        }

        .content_li .head .left {
            display: flex;
            align-items: center;

        }

        .content_li .head .left .center {
            color: #fff;
            display: block;
            width: 3.5rem;
            height: 1.5rem;
            line-height: 1.5rem;
            text-align: center;
            background-color: #ff0000;
            border-radius: 0.7rem;
            margin-left: 0.85rem;
        }

        .content_li .address {
            height: 1.4rem;
            line-height: 1.8rem;
        }

        .content_li_two {
            float: left;
            width: 100%;
            height: 4.45rem;
            box-sizing: border-box;
            color: #333333;
            font-size: 1.5rem;
            line-height: 4.45rem;
        }

        .content_li_two .head {
            display: flex;
            width: 100%;
            height: 1.7rem;
            margin: 1.65rem 0 0 0;
            color: #333;
            align-items: center;
            line-height: 1.7rem;
            justify-content: space-between;
            padding: 0 1.3rem 0 0;
        }
        .content_li_two .head .head_box{
            display: flex;
        }
        .content_li_two .head .left {
            display: flex;
            align-items: center;
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            border: 0.05rem solid #ccc;
            margin-right: 1rem;
        }

        .content_li_two .head .left img {
            width: 1.5rem;
            height: 1.5rem;
            margin-right: 1.75rem;
            /*border: 0.05rem solid #ed6a20;*/
            border-radius: 50%;
        }

        .content_li_two .head .right {
            display: flex;
            align-items: center;
        }
        .content_li_two .head .right div{
            display: flex;
            align-items: center;
        }
        .content_li_two .head .right div .img1 {
            width: 1.65rem;
            height: 1.65rem;
            margin-right: 0.75rem;
        }

        .content_li_two .head .right div .img2 {
            width: 1.55rem;
            height: 1.7rem;
            margin-right: 0.75rem;
            margin-left: 1.55rem;
        }
        /*loading框*/
         .loading{
          width: 35%;
          height: 6.4rem;
          position: fixed;;
          top: 40%;
          left: 35%;
          margin: 0 auto;
          border-radius: 0.7rem;
          line-height: 6.4rem;
          text-align: center;
          color: #fff;
          background: #000;
          opacity: 0.7;
        }
        /*下拉触底垫块*/
        .footer{
          width: 100%;
          height: 8.45rem;
          background: #f60;
          line-height: 8.45rem;
          color: #fff;
        }
        .add_btn {
            width: 27.6rem;
            height: 4rem;
            background-color: #ed6a20;
            border-radius: 2rem;
            margin: auto;
            position: fixed;
            bottom: 1rem;
            left: 0;
            right: 0;
            font-size: 1.5rem;
            color: #ffffff;
            line-height: 4rem;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
            <a class="aui-pull-left aui-btn" onclick="goBack()">
                <img src="../../../../image/back.png">
            </a>
            <div class="aui-title">收货地址</div>
        </header>
        <div class="content aui-pull-refresh">
            <div class="content_list " v-for="(item,index) in list" @click="goOrder(item.address_id)">
                <div class="content_li">
                    <div class="head">
                        <div class="left">{{item.consignee}}
                            <div class="center" v-if="create">{{item.home}}</div>
                        </div>
                        <div class="right">{{item.telephone}}</div>
                    </div>
                    <div class="address">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</div>
                </div>
                <div class="content_li_two">
                    <div class="head">
                      <div class="head_box">
                        <div class="left" @click="clickImg(index)">
                            <img src="../../../../image/capital/icon13.png" alt="" v-if="item.is_default==1?isShow:''">
                        </div>
                          {{add}}
                      </div>


                        <div class="right">
                            <div @click="edit(index)">
                                <img src="../../../../image/capital/icon15.png" alt="" class="img1">编辑
                            </div>

                            <div  @click="detail(index)">
                                <img src="../../../../image/capital/icon16.png" alt="" class="img2">删除
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- loading -->
            <div class="loading" v-if="creatimg">
              <!-- <img src="../../../../image/capital/loading.png" alt="" > -->
              {{creatext}}
            </div>
            <!-- 下拉触底垫块 -->
            <div class="footer" v-if="isfooter">
                  111
            </div>
            <div class="add_btn" @click="go_url('add_address','./add_address.html')">
                + 新建收货地址
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../../../script/api.js"></script>
<script type="text/javascript" src="../../../../script/zepto.js"></script>
<script type="text/javascript" src="../../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../../../script/utils.js"></script>
<script type="text/javascript" src="../../../../script/common.js"></script>
<script type="text/javascript" src="../../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../../../script/axios.min.js"></script>
<script type="text/javascript" src="../../../../script/axios-config.js"></script>
<script type="text/javascript" src="../../../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../../../script/aui-scroll.js"></script>
<script type="text/javascript">
    apiready = function() {
      // setRefresh()
      api.parseTapmode();
      var scroll = new auiScroll({
          listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
          distance:200 //判断到达底部的距离，isToBottom为true
      },function(ret){
         console.log(ret.scrollTop) //1013
        //  var that = this
          if(ret.scrollTop>0){
            var isfooter = this.isfooter
            console.log(this.isfooter)
          }

      });
      new Vue({
          el: "#app",
          data: {
              create: true,
              img: '../../../../image/capital/icon13.png',
              add: '默认地址',
              list: [],
              is_default:'',
              img2:'../../../../image/capital/icon14.png',
              isShow:true,
              creatimg:false,
              isfooter:false,
              creatext:'最多只能添加10条收货地址'
          },
          methods: {
            // 设置是否为默认地址
              clickImg: function(index) {
                  console.log(index)
                  var list = this.list
                  var is_default = this.is_default
                  var id = list[index].address_id
                  console.log(id)
                  if(list[index].is_default == 0){
                      list[index].is_default = 1
                      list[is_default].is_default = 0
                      this.is_default = index
                      this.list = list
                      var token = $api.getStorage('token')
                          var address_id = this.list.address_id
                          var data={
                            token:token,
                            address_id:id
                          }
                          Axios.post(window.Url.set_default_address, data).then(function(res){
                               console.log(JSON.stringify(res));
                          })
                  }
              },
              // 编辑地址（详情）
              edit:function(index){
                // console.log(index)
                var list = this.list
                for(var i=0;i<list.length;i++){
                  if(i==index){
                    address_id=list[i].address_id
                    api.openWin({
                       name:'add_address',
                       url:'./add_address.html',
                       pageParam: {
                           name: address_id
                       }
                    });

                  }
                }
                // console.log(id)
              },
              detail:function(index){
                var list = this.list
                for(var i=0;i<list.length;i++){
                  if(i==index){
                    console.log(list[i].is_default)
                    console.log(i)
                    if(list.length<2&&i==0){
                      address_id=list[i].address_id
                      console.log(address_id)
                      var token = $api.getStorage('token');
                      var data={
                        token:token,
                        address_id:address_id
                      }
                      // 删除地址
                          Vue.delete(this.list,address_id);
                          Axios.post(window.Url.del_address, data).then(function(res){
                            console.log(JSON.stringify(res));
                            if(res.status==1){

                              api.sendEvent({
                                   name: 'update_user_address',
                                   extra: {
                                       info:"updata_address"
                                   }
                               });
                            }

                          })
                          break;
                    }
                    if(list[i].is_default==1){
                      this.creatimg=true
                      this.creatext='不能删除默认地址'
                      var that = this
                      setTimeout(()=>{
                        this.creatimg=false
                      },1000)
                      break;
                    } else{
                      address_id=list[i].address_id
                      console.log(address_id)
                      var token = $api.getStorage('token');
                      var data={
                        token:token,
                        address_id:address_id
                      }
                      // 删除地址
                          Vue.delete(this.list,address_id);
                          Axios.post(window.Url.del_address, data).then(function(res){
                            console.log(JSON.stringify(res));
                            if(res.status==1){

                              api.sendEvent({
                                   name: 'update_user_address',
                                   extra: {
                                       info:"updata_address"
                                   }
                               });
                            }

                          })
                    }



                  }
                }
              },
              go_url:function(name, url) {
                  var list = this.list
                  if(list.length>9){
                    console.log('只能添加10条地址')
                    this.creatimg=true
                    var that = this
                    setTimeout(()=>{
                        that.creatimg=false
                    },1000)
                  }else{
                    api.openWin({
                        name: name,
                        url: url,
                        pageParam: {
                            data: ''
                        }
                    });
                  }

              },
              //返回下单页面
              goOrder: function(address_id) {

                console.log(api.pageParam.cartids);
                if(api.pageParam.cartids){
                  api.openWin({
                    name: 'myInfo_my_info',
                    url: '../../../cart/order_true.html',
                    pageParam: {
                      cartids: api.pageParam.cartids,
                      orderType: 3,
                      address_id: address_id
                    }
                  });
                } else {

                }
              }
          },
          mounted: function() {
            api.addEventListener({
                 name: 'update_user_address'
             }, function(ret, err) {
                if(ret.value.info=="updata_address"){
                  Axios.post(window.Url.address_list, data).then(function(res) {
                      console.log(JSON.stringify(res));
                      if (res.status == 1) {
                          that.list = res.list
                          for(var a=0;a<res.list.length;a++){
                              if(res.list[a].is_default==1){
                                that.is_default = a
                              }
                          }
                      }
                      if(res.status==0){
                        that.list = res.list
                        for(var a=0;a<res.list.length;a++){
                            if(res.list[a].is_default==1){
                              that.is_default = a
                            }
                        }
                      }
                  })
                }
             });
              // 获取地址列表
              var token = $api.getStorage('token');
              console.log(token)
              var data = {
                  token: token
              }
              var that = this
              Axios.post(window.Url.address_list, data).then(function(res) {
                  console.log(JSON.stringify(res));
                  if (res.status == 1) {
                      that.list = res.list
                      console.log(that.list)
                      for(var a=0;a<res.list.length;a++){
                          if(res.list[a].is_default==1){
                            that.is_default = a
                          }
                      }
                  }
              })
          }

      })
    };
    //刷新
    function setRefresh() {
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-pull-refresh'),
            triggerDistance: 100
        }, function(ret) {
            if (ret.status == "success") {
                setTimeout(function() {
                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                }, 1500)
            }
        })
    }


    function goBack() {
        api.closeWin({});
    }

</script>

</html>
